<template>
  <div class="app-container">
    <!--操作-->
    <div class="filter-container">
      <el-form ref="listQuery" :inline="true" :model="listQuery" label-width="60px" label-position="left" size="mini">
        <el-form-item label="名称">
          <el-input v-model="listQuery.formName" />
        </el-form-item>
        <el-form-item label="发起人">
          <el-input v-model="listQuery.userName" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="fetchData">查询</el-button>
          <el-button @click="listQuery={}">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
    <!--表格-->
    <el-table v-loading="listLoading" :data="list" element-loading-text="Loading" border fit highlight-current-row>
      <el-table-column label="名称" align="center">
        <template slot-scope="scope">
          {{ scope.row.formName }}
        </template>
      </el-table-column>
      <el-table-column label="系统" align="center">
        <template slot-scope="scope">
          {{ scope.row.systemSn }}
        </template>
      </el-table-column>
      <el-table-column align="center" label="发起人">
        <template slot-scope="scope">
          {{ scope.row.starter }}
        </template>
      </el-table-column>
      <el-table-column align="center" label="创建时间">
        <template slot-scope="scope">
          <i class="el-icon-time" />
          <span>{{ scope.row.startTime | formatDate }}</span>
        </template>
      </el-table-column>
      <el-table-column fixed="right" label="操作" width="300">
        <template slot-scope="scope">
          <el-button size="mini" type="text" @click="imgPreview(scope.row)">详情</el-button>
          <el-divider direction="vertical" />
          <el-button size="mini" type="text" :disabled="scope.row.suspensionState === 0" @click="finish(scope.row)">终止</el-button>
          <el-divider direction="vertical" />
          <el-button v-if="[0,1].includes(scope.row.suspensionState)" type="text" :disabled="scope.row.suspensionState === 0" @click="hangTask(scope.row)">挂起</el-button>
          <el-button v-if="scope.row.suspensionState === 2" type="text" @click="hangTask(scope.row)">激活</el-button>
          <el-divider direction="vertical" />
          <el-button size="mini" type="text" @click="deleteProcessInstance(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!--图片预览-->
    <el-dialog title="详情" :visible.sync="dialogVisible" width="50%">
      <el-image :src="processImg" />
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { instanceList, finishFun, hangOrActive, deleteProcessInstanceById } from '../../api/instance'
import { parseTime } from '@/utils'

export default {
  name: 'Instance',
  data() {
    return {
      dialogVisible: false,
      processImg: '',
      list: [],
      listLoading: true,
      listQuery: {
        formName: '',
        userName: '',
        page: 1,
        limit: 10
      }
    }
  },
  created() {
    this.fetchData()
  },
  methods: {
    parseTime,
    fetchData() {
      this.listLoading = true
      instanceList(this.listQuery).then(response => {
        this.total = response.data.total
        this.list = response.data.data
        this.listLoading = false
      })
    },
    // 终止
    finish(record) {
      const { processInstanceId } = record
      finishFun({ 'processInstanceId': processInstanceId }).then(response => {
        const result = response.data
        if (result.code === '101' || result.code === '100') {
          this.fetchData()
          this.$message.success(result.msg)
        }
      })
    },
    imgPreview(record) {
      this.dialogVisible = true
      this.processImg = `/server/rest/formdetail/image/${record.processInstanceId}`
    },
    hangTask(record) {
      hangOrActive({ 'id': record.processInstanceId, 'suspensionState': record.suspensionState }).then(response => {
        const result = response.data
        if (result.code === '101' || result.code === '100') {
          this.fetchData()
          this.$message.success(result.msg)
        }
      })
    },
    deleteProcessInstance(record) {
      deleteProcessInstanceById(record).then(response => {
        const result = response.data
        if (result.code === '101' || result.code === '100') {
          this.fetchData()
          this.$message.success(result.msg)
        }
      })
    }
  }
}
</script>
<style scoped lang="scss">
  .filter-container {
    padding-bottom: 0px;

    .modal-upload {
      display: inline-block;
    }
  }
</style>
